<template>
  <div>
    <ChildSlot>
      <!-- 以下这种是旧版语法的写法，已被淘汰 -->
      <!-- <div v-slot:header></div> -->

      <!-- 具名插槽 -->
      <template #header>
        <div>我是插入到heather的具名插槽</div>
      </template>

      <!-- 默认插槽 -->
      <div>我是插入到main的默认插槽</div>

      <!-- 具名插槽 -->
      <template #main>
        <div>我是插入到main中的具名插槽</div>
      </template>
      <template #footer>
        <div>我是插入到footer中的具名插槽</div>
      </template>

      <!-- 作用域插槽 -->
      <!-- <template v-slot="scope">
        {{ scope.user.fristName }}
      </template> -->
      <!-- 以上插槽可以解构 -->
       <template v-slot="{user}">
        {{ user.fristName }}
      </template>
    </ChildSlot>
  </div>
</template>

<script>
// 使用自定义组件的方法
// 1.引入自定义组件
// 2.注册自定义组件
// 3.使用组件
// import ChildSlot from './Slot/chilren.vue'
import ChildSlot from '@/demo/Slot/chilren.vue'
export default {
  components: {
    ChildSlot
  }
}
</script>

<style>
</style>
